<template>
  <div>
    <transition name="fade">
      <router-view></router-view>
    </transition>
    <footer>
      <router-link tag="p" to="fuu1">主页</router-link>
      <router-link tag="p" to="fuu2">分类</router-link>
      <router-link tag="p" to="fuu3">购物车</router-link>
    </footer>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
footer {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 1rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
<script>
export default {
  data() {
    return {};
  },
};
</script>
